<template>
  <div id="menu">
    <el-menu
      class="el-menu-vertical-demo"
      background-color="#495060"
      text-color="#c9cbd0"
      active-text-color="#2d8cf0"
      :default-active="activeMenu"
      :collapse="menuCollapse"
      unique-opened
    >
      <!-- @select="menuSelect" -->
      <el-menu-item class="logo" index="0" @click="$router.push('/index')">
        <img :src="logo" alt="logo" />
      </el-menu-item>
      <sub-menu v-for="item in menu" :item="item" :key="item.moduleID"></sub-menu>
      
    </el-menu>
  </div>
</template>

<script>
import { mapGetters, mapMutations, mapActions } from "vuex";
import { menuRouter } from "@/router/index";
import SubMenu from './SubMenu'

export default {
  components:{
    SubMenu
  },
  data() {
    return {
      logo: require("../assets/logo.png"),
      //menu: this.$store.getters.routes
      menu: menuRouter
    };
  },

  computed: {
    ...mapGetters("layout", {
      menuCollapse: "menuCollapse",
      menuIndex: "menuIndex"
    }),
    activeMenu(){
      const {meta,path}  = this.$route
      if(meta.activeMenu){
        return meta.activeMenu
      }
      return path
    }
  },
  watch: {
    menuCollapse(collapse) {
      this.logo = collapse
        ? require("../assets/logo.png")
        : require("../assets/logo.png");
    }
  },
  mounted() {
    this.$api.get('/Login/menu',[this.$store.state.user.userName]).then(res=>{
      // console.log(res)
      this.menu=res.msg;
    })
  },
  methods: {
    menuSelect(index, indexPath) {
      if (index != 0) {
        let menuIndex1 = indexPath[0];
        let menuIndex2 = 0;
        if (indexPath.length == 2) {
          let tmp = indexPath[1].split("-");
          menuIndex2 = tmp[1];
        }
        let path = "";
        let moduleId = "";
        this.menu.map((menu, i) => {
          if (i == menuIndex1) {
            path += menu.path;
            if (menu.children.length == 1) {
              path += "/" + menu.children[0].path;
              return false;
            } else {
              menu.children.map((children, i) => {
                if (i == menuIndex2) {
                  path += "/" + children.path;
                  moduleId = children.moduleId;
                  return false;
                }
              });
            }
          }
        });
        
        this.$store.commit("layout/setModuleId", moduleId);
        this.$store.commit(
          "layout/setMenuIndex",
          indexPath[indexPath.length - 1]
        );
        this.$router.replace(path);
      }
    }
  }
};
</script>

<style scoped lang="stylus">
#menu {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #495060;

  .logo {
    text-align: center;
    height: auto;
    padding: 12px 20px;

    img {
      height: 50px;
      width: auto;
      margin: 0 -14px;
    }
  }

  .el-menu {
    height: 100%;
    border-right: none;

    &:not(.el-menu--collapse) {
      width: 200px;
      min-height: 400px;
    }

    i {
      font-size: 24px;
      margin-right: 10px;
    }
  }
}
</style>
